<template>
  <!-- 代金券-->
  <div class="coupon_list white_bg">
    <div class="shop_title"><p>{{coupon.mchtName}}</p></div>
    <!-- ************** 猜你喜欢下的电子劵 ************** -->
    <a href="javascript:;" @click.prevent="couponDetail(coupon)">
      <div class="coupon_img">
        <img v-lazy="coupon.url">
        <div class="coupon_tag"
          :class="{
            'tag_bg_yellow':coupon.type=='cash',
            'tag_bg_green':coupon.type=='rebate',
            'tag_bg_blue':coupon.type=='voucher',
            'tag_bg_orange':coupon.type=='present',
            'tag_bg_purple':coupon.type=='ticket'}">{{coupon.type | couponTp}}</div>
      </div>
      <div class="index_cp_info" v-if="view === 'guessLike'">
        <div class="index_cp_l">
          <p class="index_cp_tit">{{coupon.name}}</p>
          <p class="index_cp_star">
            <coupon-star :couponComScore="coupon.comScore"></coupon-star>
            <span style="float:left;margin: 0.2rem 0 0 0.4rem;">{{coupon.comNum}}条</span>
          </p>
          <p class="index_cp_txt">{{coupon.mchtTypeValue}}<span class="pad_l">面值</span><span class="pad_l red_color">{{coupon.denomination | denomination(coupon.couponType || coupon.type)}}</span></p>
          <p class="index_cp_txt">{{coupon.mchtArea || '无'}}<span class="pad_l"></span></p>
        </div>
        <div class="index_cp_r">
          <p class="index_cp_pri"><b>{{coupon.yunCur}}</b>芸券</p>
          <p class="index_cp_bt">已售出 {{coupon.soldnum}}</p>
          <p class="index_cp_bt">已使用 {{coupon.usednum}}</p>
        </div>
      </div>
      <!-- ************** 电子劵 ************** -->
      <template v-else-if="view === 'coupon'">
        <div class="selled" v-if="coupon.sellNum > 1">{{coupon.sellNum}}张</div>
        <div class="coupon_info">
          <div class="coupon_info_tit"><b>{{coupon.name}}</b></div>
          <div class="coupon_info_item">
            <p class="info_r">
             {{coupon.mchtArea}} {{( (coupon.distance+'') || oneCouponMer.mchtSearch.distance) | setDistance}}
            </p>
            <p>有效期至：{{coupon.validatyEnd | endTime2}}</p>
          </div>
          <div class="coupon_info_item">
            <p class="info_r">已售出{{coupon.soldnum}}</p>
            <coupon-star :couponComScore="coupon.comScore"></coupon-star>
            <span style="float:left;margin: 0.15rem 0 0 0.4rem;">{{coupon.comNum}}条</span>
          </div>
          <div class="clear"></div>
          <div class="coupon_info_item">
            <p class="info_r">已使用{{coupon.usednum}}
            </p>
            <p class="left sm_font">{{coupon.mchtType}}</p>
            <p class="left sm_font denomination color_gray_03">面值 <b class="red_color">{{coupon.denomination | denomination(coupon.type || coupon.couponType)}}</b></p>
          </div>
        </div>
      </template>
    </a>
    <div class="coupon_bot btnLine" v-if="view === 'coupon'">
      <div class="coupon_price_wrp">
        <b class="coupon_money">{{coupon.valuation || coupon.yunCur}}</b><span> 芸券 </span>&nbsp;&nbsp;<img v-lazy="coupon.usrPicUrl" width="20" height="20"> {{coupon.usrName}}
      </div>
      <a href="javascript:;" @click="couponDetail(coupon)" class="coupon_bot_btn">立即兑换</a>
    </div>
  </div>
</template>

<script>
import {Storage} from 'src/utils/storage.js'

export default {
  name: 'coupon-card',
  data: () => ({}),
  props: {
    coupon: {
      type: Object,
      default: () => ({
       mchtLogUrl:''
      })
    },
    view: {
      type: String,
      default: ''
    },
    orderId: {
      type: String,
      default: ''
    },
    //正扫状态兑换成功返回首页
    scanState:{
    	type: String,
      default: ''
    },
    tlrNo:{
    	type: String,
      default: ''
    },
    inputAmt:{
    	type: String,
    	default: ''
    },
    inputNoSlae:{
    	type: String,
    	default: ''
    },
    inputDeskNum:{
    	type: String,
    	default: ''
    }
  },
  methods: {
    couponDetail: function(params) {      // 查看电子劵详情
      // 下个版本删除掉缓存
      Storage.set("couponInfo", params);
      if (this.orderId) {
        this.$emit('exchange', params)
      } else {
        this.$store.commit("WAIT_LOADING", true);
        this.$router.push({
          name: 'couDetail',
          query: {
            seq: params.seqNo || params.id || '',
            couponId: params.couponId || '',
            mchtId: params.mchtId,
            usrPicId: params.usrPicId || '',
            usrId: params.usrId || '',// 挂单用户ID
            scanState:this.scanState,
            tlrNo:this.tlrNo,
            inputAmt:this.inputAmt,
            inputNoSlae:this.inputNoSlae,
            inputDeskNum:this.inputDeskNum
          }
        });
      }
    },
  }
}
</script>

<style scoped>
.index_cp_pri {
  text-align: center;
}
.index_cp_star {
  line-height: 1.5rem;
  font-size: .8rem;
  color: #666;
  overflow: hidden;
}
.index_cp_txt {
  line-height: 1.2rem;
  font-size: .8rem;
}
.coupon_img {
  margin: 1rem .667rem 0 1rem;
}
.coupon_img img {
  border-radius: 0;
}
.index_cp_info {
  height:7rem;
  position: relative;
  padding:.8rem 0 0 .6rem;
  /*height:6rem;*/
}
.coupon_list{
  box-shadow: 0 0.1rem 0.2rem rgba(202,202,202,.35);
  margin: 0 .667rem;
  margin-bottom: 1rem;
  border-radius: .2rem;
  position: relative;
  min-height: 7rem;
}
.coupon_list:last-child {
  margin-bottom: .2rem;
}
.coupon_list:before {
  content: "";
  position: absolute;
  left: -.45rem;
  top: 0;
  bottom: 0;
  /*height: 100%;*/
  width: 0.8rem;
  background: url("../../images/liBg.png") no-repeat;
  background-size: cover;
}
.coupon_list > div a {
  display: block;
  color: #333;
}
/*.coupon_list > div a:after {
  display: block;
  content: "";
  clear: both;
}*/
.coupon_price_wrp {
  float: left;
  line-height: 2rem;
  margin-top: 0.5rem;
  width: 66%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.coupon_price_wrp img{vertical-align: text-bottom;}
.index_cp_tit {
    font-weight: bold;
    color: #333;
    width: -webkit-calc(80% - 7.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*电子券头部商户*/
.shop_title{
    /*margin-left: -0.15rem;*/
    background-color: #fff;
    z-index: 10;
    position: relative;
    padding: 0 0 0 1rem;
    border-radius: .2rem;
    color:#333;
}
.shop_title p{
    font-weight: bold;
    font-size: 1rem;
    line-height: 2.2rem;
    border-bottom:1px solid #e6e6e6;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.coupon_bot {
  width: 100%;
}
.denomination {
  padding-left: .8rem;
}
</style>
